<template>
  <div class="opus-form">
    <Form ref="formValidate" :model="opusArr" :rules="ruleValidate" :label-width="72">
      <FormItem label="标题" prop="title">
        <Input v-model="opusArr.title" ></Input>
      </FormItem>
      <FormItem label="分类">
        <Select  v-model="opusArr.classid">
          <Option v-for='value in navArr' :value="value.id" :key="value.id">{{value.title}}</Option>
        </Select>
      </FormItem>
      <FormItem label="主图" prop="titleimg">
        <Input v-model="opusArr.titleimg" placeholder="选择或输入图片连接">
          <InsertPhoto  slot="append" @returnimg="returnimg"></InsertPhoto>
        </Input>
      </FormItem>
      <FormItem label="关键字" prop="keyword">
        <Input v-model="opusArr.keyword" placeholder="输入关键字，用空格分开"></Input>
      </FormItem>

      <mavon-editor 
        v-model="opusArr.content" 
        :style='clickFull' 
        :subfield="false"
        @save='saveContent'
        @fullScreen="fullScreen"
        />
    </Form>
    
  </div>
</template>
<script>
export default {
  name:"Opus",
  props:["id"],
  data () {
    return {
      opusArr:{},
      ruleValidate: {
        title: [
          { required: true,max:120, message: '不能为空或超过50字', trigger: 'blur' }
        ],
        keyword: [
          { required: true, message: '输入关键字，用空格分开', trigger: 'blur' }
        ]
      },
      ifFull:false
    }
  },
  created(){
    
  },
  mounted(){
    this.initialization(this.id);
  },
  /*beforeRouteUpdate (to, from, next) {
    console.log(to, from, next)
    this.$router.push();
  },*/
  watch:{
    '$route' (to, from) {
      this.initialization(to.params.id);
    }
  },
  computed:{
    navArr:function(){
      return this.$store.state.base.navArr.filter(function(item){
        return item.type == 'index/opus/index' && item.status > 0;
      });
    },
    clickFull:function(){
      return this.ifFull?{zIndex:1200}:{zIndex:1};
    }
  },
  methods: {
    initialization:function(id){
      if(id>0){
        this.getOpusArr(id);
      }else{
        this.opusArr={
          id:-1,
          title:"",
          titleimg:"",
          content:"",
        }
      }
    },
    saveContent:function(){
      //this.opusArr.content=value;
      this.$http.post('/opus/save',this.opusArr,{
        headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        transformRequest: [function (data) {
          //简单的一维表单，可以用这个处理，或是在前面用FromData处理
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
      })
      .then((response)=>{
        delete response.data.create_time;
        delete response.data.update_time;
        this.opusArr=response.data;
        this.$store.dispatch('getOpusList');//后台加载文章列表
        this.$Message.success({
          content:'保存成功',
          top: 50,
          duration: 3
        });
      })
    },
    getOpusArr:function(id){
      this.$http.get("/opus",{
        params: {"id": id}
      })
      .then((response)=>{
        delete response.data.create_time;
        delete response.data.update_time;
        this.opusArr=response.data;
      });
    },
    returnimg:function(imgurl){
      this.opusArr.titleimg=imgurl;
    },
    fullScreen:function(){
      let ifFull =this.ifFull;
      return this.ifFull=!ifFull;
    }
  }
}
</script>
<style>
  .opus-form{
    padding: 0.5rem;
  }
</style>